import styled from "styled-components";
import { Form, Icon, Tooltip } from "antd";
import React from "react";

const InputDiv = styled.div`
  //display: flex;
  //width: 100%;
  //align-items: center;
  //background-color: #40a9ff;
`;

/**
 * 输入组件
 * @param props
 * @returns {JSX.Element}
 * @constructor
 */
const MFormItem = props => {
  const {
    fieldName = "",
    label = "",
    required = false,
    form,
    children,
    hint = "",
    initialValue
  } = props;
  const { getFieldDecorator } = form;
  return (
    <InputDiv>
      <Form.Item label={label} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
        {children
          ? // 是否有属性名
            fieldName != ""
            ? // 是否有默认值
              initialValue != null || initialValue != undefined
              ? getFieldDecorator(fieldName, {
                  initialValue: initialValue,
                  rules: [
                    {
                      required: required,
                      message: label != "" ? `请输入${label}` : ""
                    }
                  ]
                })(children)
              : getFieldDecorator(fieldName, {
                  rules: [
                    {
                      required: required,
                      message: label != "" ? `请输入${label}` : ""
                    }
                  ]
                })(children)
            : children
          : null}
      </Form.Item>
    </InputDiv>
  );
};

export default MFormItem;
